import React, { useEffect, useState } from "react"
// import styles from "./proManagement.less"
import styles from './interviewRecord.less'
import { IRouteComponentProps } from 'umi'
import { message, Space } from 'antd';
import { Button } from "antd"
import useStore from "@/context/useStore";
import { observer } from 'mobx-react-lite'
const interviewRecord: React.FC<IRouteComponentProps> = props => {
    console.log(props.location.query);
    let interviewId = props.location.query.interviewId;
    let { InterviewList } = useStore()
    let [flag, setFlag] = useState(false);
    useEffect(() => {
        if (interviewId) {
            InterviewList.getinterviewRecord(String(interviewId))
        }
    }, [])
    console.log(InterviewList.interviewRecord);
    const success = () => {
        setFlag(!flag)
        if (flag) {
            message.success('取消屏蔽');
        } else {
            message.success('屏蔽成功');
        }
    }
    return <div className={styles.interviewrecord}>
        <div className={styles.interviewrc}>
            <section className={styles.recordtop}>
                <h2>查看面试记录</h2>
                <div className={styles.but}>
                    <Button className={styles.back} onClick={() => props.history.go(-1)}>返回</Button>
                    <Button className={styles.no} type="primary" onClick={success}>屏蔽</Button>

                </div>
            </section>
            <div className={styles.recordcon}>
                <div className={styles.small}>
                    <div className={styles.one}>
                        <h3>岗位名称&nbsp;&nbsp;&nbsp;&nbsp; {InterviewList.interviewRecord.stationName}</h3>
                        <h3>公司名称&nbsp;&nbsp; {InterviewList.interviewRecord.companyName}</h3>

                    </div>
                    <div className={styles.two}>
                        <h3>面试时间&nbsp;{InterviewList.interviewRecord.interviewTime}</h3>

                        <h3>时长&nbsp;&nbsp;&nbsp;&nbsp; {InterviewList.interviewRecord.duration}</h3>

                    </div>
                    <div className={styles.three}>
                        <h3>地点&nbsp;&nbsp; {InterviewList.interviewRecord.site}</h3>
                        <h3>面试官&nbsp;&nbsp;&nbsp;&nbsp; {InterviewList.interviewRecord.intervierManagement}</h3>
                    </div>
                    <div className={styles.four}>
                        <h3>专业&nbsp;&nbsp;{InterviewList.interviewRecord.majorName}</h3>
                        <h3>提交人&nbsp;&nbsp;&nbsp;&nbsp; {InterviewList.interviewRecord.commitName}</h3>
                    </div>
                    <h3>记录 吐槽 {InterviewList.interviewRecord.record}</h3>
                    <h3>面试结果 {InterviewList.interviewRecord.status}</h3>
                    <h3>录音文件 {InterviewList.interviewRecord.issoundrecord} </h3>
                    <div className={styles.seven}>
                        <h3>面试问题&nbsp;&nbsp;:</h3>&nbsp;&nbsp;&nbsp;
                    <p>请如实填写面试问题和答案，面试中没有作答的题目可略过答案填写，直接输入问题即可。</p>

                    </div>
                    <div className={styles.five}>
                        <p>问</p> <span>：测试提问问题</span>
                    </div>
                    <div className={styles.six}>
                        <p>答</p>  <span>：测试提问问题</span>
                    </div>
                </div>
                {flag ? <div className={styles.big}>
                    <img src="http://111.203.59.61:8060/static/img/shield.69691644.svg" alt="" />
                </div> : '解除屏蔽'}
            </div>
        </div>
    </div>
}

export default observer(interviewRecord)
